<template>
  <div class="screen">
    <dl v-for="item,i in list" :key='i'>
      <dt>{{item.title}}</dt>
      <div class="screen-list">
        <dd v-for="item1,i in item.listF" :key="i">
        {{item1}}
      </dd>
      </div>
    </dl>
    <dl>
      <dt>价格区间（元）</dt>
    </dl>

    <div>
      <span class="reset">重置</span><span class="sure" @click="screenShow(false)">确定</span>
    </div>
  </div>
</template>
<script>
import {mapActions} from 'vuex'
export default {
  methods: {
    ...mapActions(['screenShow'])
  },
  data() {
    return {
        list:[
          {
            title: "品牌",
            listF: ["品牌名称","品牌名称","品牌名称","品牌名称","品牌名称","品牌名称",]
          },
          {
            title: "品牌",
            listF: ["品牌名称","品牌名称","品牌名称","品牌名称","品牌名称","品牌名称",]
          },
          {
            title: "品牌",
            listF: ["品牌名称","品牌名称","品牌名称","品牌名称","品牌名称","品牌名称",]
          },
        ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.screen
  width 2.72rem
  padding-left .12rem
  padding-top .2rem
  dt
    color #999
    margin .1rem 0 .05rem 0
  .screen-list
    display flex
    flex-wrap wrap
    justify-content space-around

    dd 
      width .8rem
      height .32rem 
      font-size .12rem
      line-height .32rem
      background-color #f9f9f9
      color #333
      margin .05rem 0
      text-align center
      border-radius .03rem

span
  display inline-block
  width 1.26rem
  height .4rem
  text-align center
  line-height .4rem
  font-size .14rem
  position absolute
  bottom .3rem
.reset
  background-color #e0e2fa
  border-top-left-radius .2rem
  border-bottom-left-radius .2rem
  color #666ee8
.sure
  border-top-right-radius .2rem
  border-bottom-right-radius .2rem
  background-color #666ee8
  color #fff
  margin-left 1.26rem
</style>